<template>
  <view class="list">
    <view v-if="props.list.length === 0" class="empty">暂无数据</view>
    <view v-else>
      <view class="list-item" v-for="item in props.list" :key="item.id">
        <view class="left">{{ item.name }}</view>
        <view class="right">{{ item.subjectName || '未知学科' }} <text class="arrow">&gt;</text></view>
      </view>
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  list: {
    type: Array,
    default: () => []
  }
})
</script>

<style scoped>
.list {
  background: #fff;
  margin-top: 8px;
}

.list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  font-size: 15px;
  color: #222;
  border-bottom: 1px solid #f5f5f5;
}

.list-item:last-child {
  border-bottom: none;
}

.left {
  color: #222;
}

.right {
  color: #888;
  display: flex;
  align-items: center;
  gap: 4px;
}

.arrow {
  color: #bbb;
  font-size: 18px;
}

.empty {
  text-align: center;
  color: #888;
  margin: 32px 0 0 0;
  font-size: 15px;
}
</style>